<template>
	<view class="content">
		<!--签约主体信息-->
		<view class="content_2">
			<view class="sign_detail">
				<view class="detail_title">名称</view>
				<input class="detail_info" placeholder="请输入商品名称"  @input="getInput($event,'name')"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">商品价格</view>
				<input class="detail_info" placeholder="请输入商品价格"  @input="getInput($event,'price')"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">商品库存</view>
				<input class="detail_info" placeholder="请输入商品库存"  @input="getInput($event,'stock')"></input>
			</view>
			<picker class="sign_detail" @change="pickerChange($event,'goodsCate','cate_id','goodsCateList')" :value="data.goodsCate" :range="goodsCateList"
			 range-key="group_name">
				<view class="detail_title" style="width: 660upx;">{{goodsCateList[data.goodsCate].group_name}}</view>
				<image class="detail_icon" src="../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<picker class="sign_detail" @change="pickerChange($event,'goodstype','goodsType_id','goodsTypeList')" :value="data.goodstype" :range="goodsTypeList"
			 range-key="name">
				<view class="detail_title" style="width: 660upx;">{{goodsTypeList[data.goodstype].name}}</view>
				<image class="detail_icon" src="../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<picker class="sign_detail" @change="pickerChangeTime($event,'renttime')" :value="data.renttime" :range="renttimeList"
			 range-key="describes" v-if="data.goodstype == 1">
				<view class="detail_title" style="width: 660upx;">{{renttimeList[data.renttime].describes}}</view>
				<image class="detail_icon" src="../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<picker class="sign_detail" @change="pickerChangeMoney($event,'rentmoney')" :value="data.rentmoney" :range="rentmoneyList"
			 range-key="describes" v-if="data.goodstype == 1">
				<view class="detail_title" style="width: 660upx;">{{rentmoneyList[data.rentmoney].describes}}</view>
				<image class="detail_icon" src="../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<view class="sign_detail" v-if="data.goodstype == 1">
				<view class="detail_title">商品押金</view>
				<input class="detail_info" placeholder="请输商品押金" :value="rentmoney"  type="number" @input="getInput($event,'rentmoney')"></input>
			</view>
			<view class="sign_detail" v-if="data.goodstype == 1">
				<view class="detail_title">商品租金</view>
				<input class="detail_info" placeholder="请输商品租金" :value="money"  type="number" @input="getInput($event,'money')"></input>
			</view>
			<view class="sign_detail" @click="chooseAddress">
				<view class="detail_title">位置</view>
				<input class="detail_info" placeholder="请选择位置" :value="address_name" :disabled="true"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">详情图片</view>
			</view>
			<view style="padding: 0 30upx;display: flex;">
				<view class="uploadimg_view" @click="imageRequest()">
					<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
				</view>
				<block v-for="(value,index) in detail_imgs">
					<image class="uploadimg_view" :src="value.show_url"  @click="delImg(index)"></image>
				</block>
			</view>
			<view class="sign_detail">
				<view class="detail_title">备注</view>
			</view>
			<view style="padding: 0 30upx;">
				<textarea class="note_detail_info"  :value="note" :maxlength="500" placeholder="请输备注"/>
			</view>
		</view>
		<view class="sign_detail" v-if="addspecial >= 1">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info"  placeholder="请输房屋特色"  @input="getSpecial_1Input"></input>
		</view>
		<view class="sign_detail" v-if="addspecial >= 2">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info"  placeholder="请输房屋特色"  @input="getSpecial_2Input"></input>
		</view>
		<!--添加房屋特色-->
		<view class="content_4">
			<view class="add_4" @click="addSpecial">添加</view>
		</view>
		<!--下一步-->
		<view class="content_5">
			<view class="back" @click="back">返回</view>
			<view class="save" @click="$dianji(toCreat)">保存</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	//导入接口地址文件
	import {
		Address
	} from '../../../../../utils/address.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				onoff:true,		// 频繁操作点击
				goodsType_id: 1,
				rentmoney: '',
				money:'',
				data: {
					renttime: 0,
					rentmoney: 0,
					goodstype: 0,
					goodsCate: 0,
				},
				renttimeList: [],
				rentmoneyList: [],
				goodsTypeList: [{'id':1,'name':'购买商品'},{'id':2,'name':'租用商品'}],	//商品类型 默认是1直接购买商品 2是租用商品
				goodsCateList:[],
				note: '',
				address_name:'',
				latitude:'',
				longitude:'',
				detail_imgs:[],
			}
		},
		methods: {
			//删除图片
			delImg: function(index) {
				uni.showModal({
				    title: '提示',
				    content: '确认删除吗？',
				    success: (res) => {
							this.detail_imgs.splice(index, 1);
						},
					}
				)
			},
			
			imageRequest: function(param = ''){
				if(this.detail_imgs.length >= 3){
					new Request().showToast('最多三张图');
					return;
				}
				new Request('goods/push/Create_Goods/CreateGoodsImg').uploadImage(
					()=>{
						return {
							'user': 'test',
							'openid': app.globalData.openid,
						}
					},
					(res)=>{
						//封面对象
						let fengmian = {
							'show_url': res.show_url,
							'system_url': res.system_url,
						}
						this.detail_imgs.push(fengmian);
					}
				);
			},
			
			chooseAddress: function() {
				// uni.chooseLocation({
				//     success: function (res) {
				//         console.log('位置名称：' + res.name);
				//         console.log('详细地址：' + res.address);
				//         console.log('纬度：' + res.latitude);
				//         console.log('经度：' + res.longitude);
				// 		this.address_name = res.name;
				// 		this.latitude = res.latitude;
				// 		this.longitude = res.longitude;
				//     }
				// });
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.address_name = res.name;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					}
				})
			},
			//添加房屋特色
			addSpecial: function() {
				this.addspecial++
				if (this.addspecial >= 6) {
					uni.showToast({
						position: 'center',
						title: '最多只能添加5个房屋特色...',
						icon: 'none',
					});
				}
			},
			//商品类型
			pickerChange: function(e, val, name, list){
				this.data[val] = e.target.value
				this[name] = this[list][e.target.value].id
			},
			//最低起租选择改变
			pickerChangeTime: function(e, val) {
				this.data[val] = e.target.value
				this.renttime_id = this.renttimeList[e.target.value].id
			},
			//扣租方式选择改变
			pickerChangeMoney: function(e, val) {
				this.data[val] = e.target.value
				this.rentmoney_id = this.rentmoneyList[e.target.value].id
			},			
			toCreat: function() {
				if (this.name == '' || this.name == undefined) {
					new Request().showToast('请输入商品名称');
					return;
				}
				if (this.price == '' || this.price == undefined) {
					new Request().showToast('请输入商品价格');
					return;
				}
				if (this.stock == '' || this.stock == undefined) {
					new Request().showToast('请输入商品库存');
					return;
				}
				if (this.cate_id == '' || this.cate_id == undefined) {
					new Request().showToast('请选择商品分类');
					return;
				}
				let pushData = {
					openid: app.globalData.openid,
					userid: app.globalData.userid,
					goods_name: this.name,
					sell_price: this.price,
					goods_stock: this.stock,
					cate_id: this.cate_id,
					cover_image: this.photo_arr[0].system_url,
					goods_type: this.goodsType_id,
					note: this.note,
					address_name: this.address_name,
					latitude: this.latitude,
					longitude: this.longitude,
					photo_arr: this.photo_arr,
					detail_imgs: this.detail_imgs,
				}
				//如果是租用商品就需要判断
				if(this.data.goodstype == 1){
					if (this.renttime_id == '' || this.renttime_id == undefined) {
						new Request().showToast('请选择最低租期');
						return;
					}
					if (this.rentmoney_id == '' || this.rentmoney_id == undefined) {
						new Request().showToast('请选择扣租方式');
						return;
					}
					if (this.rentmoney == '' || this.rentmoney == undefined) {
						new Request().showToast('请输入商品押金');
						return;
					}
					if (this.money == '' || this.money == undefined) {
						new Request().showToast('请输入商品租金');
						return;
					}
					pushData['renttime_id'] 		= this.renttime_id;
					pushData['way_id'] 				= this.rentmoney_id;
					pushData['rent_money'] 			= this.rentmoney;
					pushData['months_money'] 		= this.money;
				}else{
					delete pushData['renttime_id'];
					delete pushData['way_id'];
					delete pushData['rent_money'];
					delete pushData['months_money'];
				}
				console.log(pushData)
				uni.request({
					url: 'https://api.yihua.pub/api/renthouse/goods/push/Create_Goods/CreateGoods',
					method: 'POST',
					data: pushData,
					success: (res) => {
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						new Request().showToast(res.data.msg,'success',()=>{
							setTimeout(()=>{
								uni.navigateBack({
								    delta: 2
								});
							},2000)
						});
					}
				})
				
			},
			//获取用户输入信息
			getInput:function(e,val){
				//商品名称
				this[val] = e.detail.value;
			},
			getSpecial_1Input: function(e) {
				this.inputspecial1 = {
					'show_name': e.detail.value
				}
			},
			getSpecial_2Input: function(e) {
				this.inputspecial2 = {
					'show_name': e.detail.value
				}
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(option) {
			// 获取undate的图片组
			console.log(JSON.parse(option.houseimg))
			this.photo_arr = JSON.parse(option.houseimg)
			//获取最低租期
			new Request('landboos/Create_House/GetRentType').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						table: 'fa_renthouse_master_rentmoney'
					}
				},
				(res) => {
					this.renttimeList = res.data.data
					this.renttimeList.unshift({
						id: '0',
						describes: '请选择最低租期'
					})
				}
			)
			//获取扣租方式
			new Request('landboos/Create_House/GetRentType').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						table: 'fa_renthouse_master_way'
					}
				},
				(res) => {
					this.rentmoneyList = res.data.data
					this.rentmoneyList.unshift({
						id: '0',
						describes: '请选择扣租方式'
					})
				}
			);
			//获取商品分类
			new Request('goods/Get_Goods_Category/GetGoodsCategoryList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project
					}
				},
				(res) => {
					this.goodsCateList = res.data
					this.goodsCateList.unshift({
						id: '0',
						group_name: '请选择商品分类'
					});
				}
			);
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 250upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		签约主体信息样式
	*/
	.title_2 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		padding-left: 28upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.sign_detail {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 28upx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.note_detail_info {
		width: 100%;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail_info {
		height: 37upx;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
		text-align: right;
	}

	.detail_icon {
		width: 40upx;
		height: 40upx;
		transform: rotate(180deg);
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.detail_son {
		margin: 0upx 30upx;
		padding: 0upx 30upx;
		display: flex;
		flex-direction: column;
	}

	.son_view {
		height: 80upx;
		background-color: #FFFFfF;
		display: flex;
		align-items: center;
	}

	.chooseicon_view {
		height: 30upx;
		width: 30upx;
		margin-right: 30upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		border: 5upx solid #5555ff;
	}

	.chooseicon_son {
		height: 20upx;
		width: 20upx;
		border-radius: 20upx;
		margin: 0 auto;
		background-color: #5555ff;
	}

	.son_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #929292;
	}

	/*
		添加房屋特色样式
	*/
	.content_4 {
		margin: 0 30upx;
		margin-top: 40upx;
		position: relative;
	}

	.add_4 {
		height: 20upx;
		font-size: 26upx;
		line-height: 20upx;
		color: #B3E9DC;
		position: absolute;
		top: 0upx;
		right: 0upx;
	}

	/*
		底部提交样式
	*/
	.content_3 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 714upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 40upx;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	/*
		证件图片上传
	*/
	.upload_view {
		height: 120upx;
		padding-bottom: 28upx;
		background-color: #FFFFFF;
		padding-left: 28upx;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/*
		配套设施样式
	*/
	.content_10 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		border-radius: 26upx;
		padding: 30upx 25upx 7upx 15upx;
		display: flex;
		flex-direction: column;
	}

	.title_10 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.equipment_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.equipment_box {
		height: 250upx;
		width: 194upx;
		background-color: #F0F0F0;
		border-radius: 20upx;
		margin-bottom: 23upx;
		margin-right: 12upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 10upx;
		position: relative;
	}

	.equipment_img {
		height: 190upx;
		width: 190upx;
		background-color: #a1a1a1;
	}

	.equipment_name {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #666666;
	}

	.equipment_choose {
		height: 35upx;
		width: 35upx;
		border-radius: 50upx;
		position: absolute;
		top: 10upx;
		right: 10upx;
		background-color: #007AFF;
	}

	/*
		底部按钮样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		right: 30upx;
		bottom: 40upx;
		height: 72upx;
		width: 410upx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 140upx;
		height: 72upx;
		border-radius: 10upx;
		background-color: #999999;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		margin-right: 20upx;
	}

	.save {
		height: 72upx;
		width: 250upx;
		border-radius: 10upx;
		background-color: #63D0D5;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
